<template>
  <div class="dashboard-editor-container">
    <div>
      <el-row> <!-- margin: 10px; -->
        <!-- 快捷菜单 -->
        <el-col style="flex: 0 0 25%;max-width: 33%; min-width: 1000px">
          <div class="c-card" style="height: 200px">
            <div style="margin-top: 3px">
              <h3 style="font-family: 黑体; margin-left: 15px">快捷菜单</h3>
            </div>
            <el-row>
              <el-col style="flex: 0 0 25%;max-width: 20%;">
                <div class="quick-button" onclick="window.location.href = '#/project/type/list'">
                  <svg-icon class="quick-icon" icon-class="home_fenlei"></svg-icon>
                  <p class="quick-p">项目分类</p>
                </div>
              </el-col>
              <el-col style="flex: 0 0 25%;max-width: 20%;">
                <div class="quick-button" onclick="window.location.href = '#/project/origin/list'">
                  <svg-icon class="quick-icon" icon-class="home_xuanxiang"></svg-icon>
                  <p class="quick-p">项目来源</p>
                </div>
              </el-col>
              <el-col style="flex: 0 0 25%;max-width: 20%;">
                <div class="quick-button" onclick="window.location.href = '#/project/detail/list'">
                  <svg-icon class="quick-icon" icon-class="home_yunwei"></svg-icon>
                  <p class="quick-p">项目详情</p>
                </div>
              </el-col>
              <el-col style="flex: 0 0 25%;max-width: 20%;">
                <div class="quick-button" onclick="window.location.href = '#/pool/list'">
                  <svg-icon class="quick-icon" icon-class="home_shoucang"></svg-icon>
                  <p class="quick-p">产品池</p>
                </div>
              </el-col>
              <el-col style="flex: 0 0 25%;max-width: 20%;">
                <div class="quick-button" onclick="window.location.href = '#/purchase/plan/list'">
                  <svg-icon class="quick-icon" icon-class="home_gouwuche"></svg-icon>
                  <p class="quick-p">采购计划</p>
                </div>
              </el-col>
              <el-col style="flex: 0 0 25%;max-width: 20%;">
                <div class="quick-button" onclick="window.location.href = '#/document/query'">
                  <svg-icon class="quick-icon" icon-class="home_wenjianjia"></svg-icon>
                  <p class="quick-p">发文管理</p>
                </div>
              </el-col>
              <el-col style="flex: 0 0 25%;max-width: 20%;">
                <div class="quick-button" onclick="window.location.href = '#/role/list'">
                  <svg-icon class="quick-icon" icon-class="home_wode"></svg-icon>
                  <p class="quick-p">角色管理</p>
                </div>
              </el-col>
              <el-col style="flex: 0 0 25%;max-width: 20%;">
                <div class="quick-button" onclick="window.location.href = '#/report/sendReceiveDeposit/sendReceiveDeposit'">
                  <svg-icon class="quick-icon" icon-class="home_wenjian"></svg-icon>
                  <p class="quick-p">收发存报表</p>
                </div>
              </el-col>
              <el-col style="flex: 0 0 25%;max-width: 20%;">
                <div class="quick-button" onclick="window.location.href = '#/inquiry/inquiryResult/list'">
                  <svg-icon class="quick-icon" icon-class="home_yue"></svg-icon>
                  <p class="quick-p">报价管理</p>
                </div>
              </el-col>
              <el-col style="flex: 0 0 25%;max-width: 20%;">
                <div class="quick-button" onclick="window.location.href = '#/dashboard'">
                  <svg-icon class="quick-icon" icon-class="home_gengduo"></svg-icon>
                  <p class="quick-p">更多</p>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <!-- 待办 -->
        <el-col style="flex: 0 0 25%;max-width: 33%;">
          <div class="c-card" style="height: 200px">
            <div style="margin-top: 3px">
              <h3 style="font-family: 黑体; margin-left: 15px">待办任务</h3>
            </div>
            <el-row>
              <el-col style="flex: 0 0 25%;max-width: 50%;">
                <div class="to-do-button" @click="showDialog">
                  <p class="p-1">待办事项</p>
                  <p class="p-2">99</p>
                </div>
              </el-col>
              <el-col style="flex: 0 0 25%;max-width: 50%;">
                <div class="to-do-button">
                  <p class="p-1">待办事项</p>
                  <p class="p-2">99</p>
                </div>
              </el-col>
              <el-col style="flex: 0 0 25%;max-width: 50%;">
                <div class="to-do-button">
                  <p class="p-1">待办事项</p>
                  <p class="p-2">99</p>
                </div>
              </el-col>
              <el-col style="flex: 0 0 25%;max-width: 50%;">
                <div class="to-do-button">
                  <p class="p-1">待办事项</p>
                  <p class="p-2">99</p>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <!-- 发文 -->
        <el-col style="flex: 0 0 25%;max-width: 34%;">
          <div class="c-card" style="height: 610px">
            <div style="width: 80%; float: left; margin-top: 3px">
              <h2 style="font-family: 黑体; margin-left: 20px">发文</h2>
            </div>
            <a class="a-label" href="#/document/query">查看更多</a>
            <a-table
              :loading="loading"
              :data-source="documents"
              size="small"
              :pagination="false"
              :rowKey="record => record.id"
              :scroll="{ y: 510 }">
              <a-table-column key="name" title="标题" data-index="name" ellipsis="true" align="left">
                <template slot-scope="text, record">
                  <el-badge :is-dot="record.readStatus == 0? true: false" class="item">
                    <a @click="viewFile(record)">{{ text }}</a>
                  </el-badge>
                </template>
              </a-table-column>
              <a-table-column key="updateTime" title="发文日期" data-index="updateTime" ellipsis="true" align="center">
                <template slot-scope="text, record">
                  {{dateTimeFormat(record.updateTime)}}
                </template>
              </a-table-column>
            </a-table>
          </div>
        </el-col>
        <!-- 图表 -->
        <el-col style="position: absolute; margin-top: 220px; max-width: 66%;">
          <div class="c-card" style="height: 390px; text-align: center">
            <Bar id="id" style="width: 100%; height:100%;"/>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 待办事项总览 -->
    <el-dialog title="待办" :visible.sync="dialogTableVisible" width="500px">
      <!--<el-table :data="gridData" @row-click="aaaaa">-->
      <a class="a-label" href="#/backlog/list">查看详情</a>
      <el-table :data="gridData">
        <el-table-column property="auditPrivilege" label="审核待办" align="center"></el-table-column>
        <el-table-column property="number" label="待办个数" align="center"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Bar from "@/charts/Bar";
import Pie1 from "@/charts/Pie1";
import Pie2 from "@/charts/Pie2";

import infiniteScroll from 'vue-infinite-scroll'
import { getAction, postActionByJson, postActionByQueryString } from '@/api/manage'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
import {dateTimeFormat} from "@/utils/format";

// import '@/styles/auto-style.css'


export default {
  name: 'DashboardAdmin',
  directives: { infiniteScroll },
  components: {
    Pie2,
    Pie1,
    Bar
  },
  data() {
    return {
      dialogTableVisible: false,
      gridData: [{
        auditPrivilege: '合同审核',
        number: 12
      }, {
        auditPrivilege: '最终审核',
        number: 32
      }, {
        auditPrivilege: '一级审核',
        number: 15
      }, {
        auditPrivilege: '二级审核',
        number: 22
      }],
      url: {
        selectDocumentSendOut: '/document/selectDocumentSendOut',
        updateDocumentRead: '/document/updateDocumentRead'
      },
      documents: [],
      loading: true,
    }
  },
  beforeMount() {
  },
  created() {
    this.toSearch()
  },
  mounted() {
  },
  methods: {
    // aaaaa(row) {
    //   console.log(row)
    // },
    showDialog() {
      this.dialogTableVisible = true
    },
    viewFile(record) {
      if (record.url) {
        window.open(record.url);
        this.updateDocumentRead(record.id)
      }else {
        this.$message.warning("未上传发文！")
        this.toSearch()
      }
    },
    dateTimeFormat,
    toSearch() {
      getAction(this.url.selectDocumentSendOut)
        .then(resp => {
          console.log(resp.data.records)
          this.documents = resp.data.records
          this.loading = false
        }).catch((item)=>{
        console.log(item)
        this.loading = false
      })
    },
    updateDocumentRead(id) {
      postActionByQueryString(this.url.updateDocumentRead, {'id': id})
        .then(resp => {
          this.toSearch()
          })
        .catch((item)=>{
          console.log(item)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 0px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .c-card {
    background-color: #ffffff;
    box-shadow: 10px 10px 5px #2d455f1a;
    border-radius: 15px;
    margin: 10px;
  }
  .a-label {
    top:0px;
    right:0px;
  }
  .quick-button {
    background-color: rgb(240, 242, 245);
    height: 72px;
    width: 72px;
    float:left;
    margin-left: 6px;
    margin-right: 5px;
    margin-bottom: 10px;
    border-radius: 10px;
    .quick-icon {
      width: 56px;
      height: 56px;
      margin-left: 8px;
    }
    .quick-p {
      margin-top: -7px;
      text-align: center;
    }
  }
  .quick-button:hover {
    cursor:pointer;
    background-color: #c9d4d5;
  }
  .to-do-button {
    background-color: rgb(240, 242, 245);
    height: 72px;
    width: 195px;
    float:left;
    margin-left: 6px;
    margin-right: 5px;
    margin-bottom: 10px;
    border-radius: 10px;
  }
  .to-do-button:hover {
    cursor:pointer;
    background-color: #c9d4d5;
  }
  .p-1 {
    text-align: center;
    font-size: 14px;
    margin-top: 5px;
  }
  .p-2 {
    text-align: center;
    font-family: 黑体;
    font-size: 33px;
    color: #3a835d;
    margin-top: -15px;
  }
}
</style>
